<template>
  <div class="">
    <div class="container step-block">
      <span>Step4: 校准效果复核</span>
      <!-- <el-button type="primary">结束本次校验</el-button> -->
    </div>
    <div class="step-content container">
      <el-form :inline="true">
        <el-form-item label="本次校准周期开始时间：">
          <el-date-picker
            type="datetime"
            v-model="query.startTime"
            placeholder=""
            clearable
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="本次校准周期结束时间：">
          <el-date-picker
            type="datetime"
            v-model="query.endTime"
            placeholder=""
            clearable
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="startCheck">开始校验</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        border
        v-loading="loading"
        ref="multipleTable"
      >
        <el-table-column width="70" align="center" label="序号" fixed>
          <template v-slot="scope">
            {{ indexMethod(scope.$index, query.page, query.pageSize) }}
          </template>
        </el-table-column>
        <template v-for="item in columns">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            v-if="item.prop === 'deviceStatus'"
          >
            <template v-slot="scope">
              {{ ["在线", "离线"][scope.row[item.prop]] }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          ></el-table-column>
        </template>
      </el-table>

      <el-pagination
        style="margin-top: 20px"
        background
        layout="prev, pager, next"
        @current-change="changeTpcList"
        :total="query.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { indexMethod } from "@/utils/tools"
import {
  getDeviceCalibrationCheckResult,
  getDeviceCalibrationCheck
} from "@/api"
import { useTool } from "./useTool"
import { Row } from "element-plus/es/components/table-v2/src/components"

const { calibrationBatch } = useTool()
useTableHight()
const query = reactive({
  time: "",
  startTime: "",
  endTime: "",
  total: 0,
  page: 1,
  pageSize: 10
})

const tableData = ref([])
const columns = ref([
  { prop: "calibrationBatch", label: "校准批次" },
  { prop: "deviceBarCode", label: "设备条形码编号" },
  { prop: "deviceNo", label: "设备ID" },
  { prop: "checkStartTime", label: "复核开始时间", width: 190 },
  { prop: "checkEndTime", label: "复核结束时间", width: 190 },
  { prop: "phaseSequence", label: "相序" },
  { prop: "deviceMeteredElectricity", label: "设备计量电量" },
  { prop: "baseAmmeteMeteredElectricity", label: "基数电表计量电量" },
  { prop: "deviation", label: "偏差" },
  { prop: "checkResult", label: "复核结果" }
])

const loading = ref(true)
const getData = async () => {
  loading.value = true
  const res = await getDeviceCalibrationCheckResult({
    pageNumber: query.page,
    pageSize: query.pageSize,
    calibrationBatch: calibrationBatch.value
  })
  loading.value = false
  if (res.rows) {
    tableData.value = res.rows
    query.total = res.total
  }
}

const startCheck = async () => {
  await getDeviceCalibrationCheck({
    calibrationBatch: calibrationBatch.value,
    checkStartTime: query.startTime,
    checkEndTime: query.endTime
  })

  getData()
}

onMounted(getData)
</script>
<style lang="less" scoped></style>
